
<template>

<div class="main">
    
    <div class="list" v-for="val,i in list">
          <div class="imges"><img :src="val.imges" alt="" style="width: 100%;height:100%;"></div>
          <div class="text">{{ val.text }}</div>
          <div class="price">{{ val.price }}￥</div>
          <div class="quantity"><div class="but" @click="jia(i)">+</div><input style="text-align: center;" type="text" v-model="val.quantity"><div class="but" @click="jian(i)">-</div></div>
    </div>
    <div class="end" style="font-weight: bold; color: red;">总计:{{ name }}</div>


</div>


</template>

<script>




export default {
    
    data() {
        return {

            list: [
                    {
                        imges: 'https://img20.360buyimg.com/babel/s320x320_jfs/t1/210475/25/11888/111868/61b05bd3E20fc84b2/e3d98f6e4399d962.jpg!cc_320x320.webp',
                        text: '拜亚动力/拜雅 (beyerdynamic) DT 900 PRO X 头戴式监听录音室开放式专用HiFi耳机',
                        price: 200,//价格
                        quantity: null,//购买数量
                        status: 100,//库存
                        amount: 0,
                        
                    },
                    {
                        imges: 'https://img13.360buyimg.com/n7/jfs/t1/135403/21/31738/70720/641d7ff7F4556f856/75e467e8af84a094.jpg',
                        text: '一加Ace2V新机上市！天玑9000移动平台，1.5K灵犀触控直屏，晒单赢30元京豆，以旧换新至高补贴600元！点击购买',
                        price: 2299,
                        quantity: null,
                        status: 100,
                        amount: 0,
                        
                    },
                    {
                        imges: 'https://img13.360buyimg.com/n7/jfs/t1/70419/16/16878/18502/638df5eeEead825ef/b6f20262ae9782e2.jpg',
                        text: '【春日添新意】指定iPhone14到手低至5399元！！！点击',
                        price: 5399,
                        quantity: null,
                        status: 100,
                        amount: 0,
                        
                    },
                ],

            
            
        }
    },



    methods: {
        jia(i) {
            this.list[i].quantity++;
        },
        jian(i) {
            
            if(this.list[i].quantity>0){
                this.list[i].quantity--;
            }
        }
    },

    computed: {
        name() {
            let num=null
            this.list.forEach(val=>{

                 num+=(val.quantity*val.price)


            })
            return num
        }
    },


    
};

</script>

<style>
*{
    padding: 0;
    margin: 0;
}
.main{
    position: relative;
    display: flex;
    flex-wrap:wrap ;
    justify-content:space-between;
    width: 100vw;
    height: 90vh;
    background: #dcdfe3;
}

.list{
    width: 19vw;
    height: 30vw;
    background: #efeeee;
    border-radius:10px;
    margin: 1px;
}

.imges{
    width: 19vw;
    height: 20vh;
    
}
img{
    border-top-right-radius:10px ;
    border-top-left-radius:10px ;
}
.text{
 overflow: hidden;
 width: 100%;
 height: 20%;
}

.price{
    height: 10%;
    font-weight: bold;
    color: red;
}

.quantity{
    height: 6%;
    display: flex;
   justify-content: space-between;
}
.but{
    width: 20%;
    text-align: center;
    
}
input{
    width: 50%;
}

.end{
    position:absolute;
    bottom: 0px;
    width: 100%;
    height: 7%;
    background: #f0eded;
}

</style>